<template>
	<view class="home c0 f14 pt10">
		<u--form labelPosition="left" :borderBottom="false" labelWidth="auto" :labelStyle="{fontSize:'14px'}"
			:model="form" :rules="rules" ref="uForm">
			<view class="bf p10 mb12">
				<u-form-item label="排序" prop="sort">
					<u--input v-model="form.sort" disabledColor="#ffffff" placeholder="请输入排序" border="none">
					</u--input>
					<u-icon slot="right" size="14" color="#999" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="门店名称" prop="name">
					<u--input v-model="form.name" disabledColor="#ffffff" placeholder="请输入门店名称" border="none">
					</u--input>
					<u-icon slot="right" size="14" color="#999" name="arrow-right"></u-icon>
				</u-form-item>
				<view class="mb10"></view>
				<u-form-item label="门店编码" prop="storeSn">
					<u--input v-model="form.storeSn" disabledColor="#ffffff" placeholder="请输入门店编码" border="none">
					</u--input>
					<u-icon slot="right" size="14" color="#999" name="arrow-right"></u-icon>
				</u-form-item>
			</view>
			<view class="bf p10 mb12">
				<u-form-item label="省/市/区" prop="regin">
					 <uni-data-picker v-model="form.region" :localdata="areaList" popup-title="请选择省市区" :map="{text:'name',value:'id'}" @change="onchange" @nodeclick="onnodeclick" style="padding-left: 40rpx;" ></uni-data-picker>
					<u-icon slot="right" size="14" color="#999" name="arrow-right"></u-icon>
				</u-form-item>
				<view class="mb10"></view>
				<u-form-item label="详细地址" prop="address">
					<u--input v-model="form.address" disabledColor="#ffffff" placeholder="请输入详细地址" border="none">
					</u--input>
					<u-icon slot="right" size="14" color="#999" name="arrow-right"></u-icon>
				</u-form-item>
				<view class="mb10"></view>
				<u-form-item label="地图定位" prop="lat" @click="toMap">
					<view class="f-x-e c8 f14">经度：{{form.lat}},纬度：{{form.lng}}</view>
					<u-icon slot="right" size="14" color="#999" name="arrow-right"></u-icon>
				</u-form-item>
			</view>
			<view class="bf p10 mb10">
				<u-form-item label="联系人" prop="contact">
					<u--input v-model="form.contact" disabledColor="#ffffff" placeholder="请输入联系人" border="none">
					</u--input>
					<u-icon slot="right" size="14" color="#999" name="arrow-right"></u-icon>
				</u-form-item>
				<view class="mb10"></view>
				<u-form-item label="联系电话" prop="mobile">
					<u--input v-model="form.mobile" disabledColor="#ffffff" placeholder="请输入联系电话" border="none">
					</u--input>
					<u-icon slot="right" size="14" color="#999" name="arrow-right"></u-icon>
				</u-form-item>
				<view class="mb10"></view>
				<u-form-item label="门店电话" prop="storeMobile">
					<u--input v-model="form.storeMobile" disabledColor="#ffffff" placeholder="请输入联系电话" border="none">
					</u--input>
					<u-icon slot="right" size="14" color="#999" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="门店标签" prop="storeMobile">
					<view class="f-g-1 f-x-e">
						<u-checkbox-group v-model="form.labelId" :activeColor="subColor" size="16" icon-color="#000">
						   <u-checkbox
							   :customStyle="{marginRight: '8px'}"
							   v-for="(item, index) in labelList"
							   :key="index"
							   :label="item.name"
							   :labelSize="14"
							   :name="item.id"
						   >
						   </u-checkbox>
						</u-checkbox-group>
					</view>
				</u-form-item>
				<u-form-item label="门店分组" prop="storeMobile">
					<uni-data-select v-model="form.groupId" :localdata="groupList" style="padding-left: 200rpx;" class="f-x-e">
					</uni-data-select>
				</u-form-item>
				<view class="mb10"></view>
				<u-form-item label="经营状态" prop="operatingStatus">
					<view class="f-bt f-x-e">
						<view class="f-g-1"></view>
						<view class="f-g-0">
							<u-radio-group v-model="form.operatingStatus" :activeColor="subColor" placement="column" size="16" icon-color="#000">
								<u-radio label="经营中" :name="1" :labelSize="14" :customStyle="{marginBottom: '8px'}"></u-radio>
								<u-radio label="即将开业" :name="2" :labelSize="14" :customStyle="{marginBottom: '8px'}"></u-radio>
								<u-radio label="停业中" :name="3" :labelSize="14" :customStyle="{marginBottom: '8px'}"></u-radio>
								<u-radio label="已关闭" :name="4":labelSize="14"></u-radio>
							</u-radio-group>
						</view>
						
					</view>
				</u-form-item>
				<view class="mb10"></view>
				<u-form-item label="营业状态" prop="businessStatus">
					<view class="pl20">
						<u-radio-group v-model="form.businessStatus" :activeColor="subColor" placement="row" size="16" icon-color="#000">
							<u-radio label="正常营业" :name="1" :labelSize="14"></u-radio>
							<u-radio label="暂停营业" :name="3" :labelSize="14"></u-radio>
						</u-radio-group>
					</view>
				</u-form-item>
				<view class="mb10"></view>
				<u-form-item label="营业时间" prop="businessData" @click="toTime">
					<view v-if="form.businessData" class="f-c-e">
						<view class="flex">
							<view v-for="(v,i) in form.businessData.week" :key="i">
								<text v-if="v==1" class="mr5">周一</text>
								<text v-if="v==2" class="mr5">周二</text>
								<text v-if="v==3" class="mr5">周三</text>
								<text v-if="v==4" class="mr5">周四</text>
								<text v-if="v==5" class="mr5">周五</text>
								<text v-if="v==6">周六</text>
								<text v-if="v==0" class="mr5">周日</text>
							</view>
						</view>
						<view>
							<view v-for="(v,i) in form.businessData.times" :key="i">
								{{v.start}} ~ <text v-if="v.ciri">次日</text>{{v.end}}
							</view>
						</view>
					</view>
					<u-icon slot="right" size="14" color="#999" name="arrow-right"></u-icon>
				</u-form-item>
				<view class="mb10"></view>
				<u-form-item label="环境图" prop="businessStatus">
					<view class="pl20">
						<u-upload
								:fileList="fileList1"
								@afterRead="afterRead"
								@delete="deletePic"
								uploadIcon="plus"
								name="1"
								multiple
								:maxCount="9"
							></u-upload>
					</view>
				</u-form-item>
				<view class="mb10"></view>
				<u-form-item label="营业执照" prop="businessStatus">
					<view class="pl20">
						<u-upload
								:fileList="fileList2"
								@afterRead="afterRead"
								@delete="deletePic"
								uploadIcon="plus"
								name="2"
								multiple
								:maxCount="9"
							></u-upload>
					</view>
				</u-form-item>
				<view class="mb10"></view>
				<u-form-item label="行业许可证" prop="businessStatus">
					<view class="pl20">
						<u-upload
								:fileList="fileList3"
								@afterRead="afterRead"
								@delete="deletePic"
								uploadIcon="plus"
								name="3"
								multiple
								:maxCount="9"
							></u-upload>
					</view>
				</u-form-item>
			</view>
		</u--form>
		<view class="buts bf5 pb20">
			<view class="p-0-20 mb20">
				<view class="c0 bs30 tac p10 wei f14" :style="{background:subColor}" @click="save">保存</view>
			</view>
		</view>
		<!-- <address-picker :show="addressShow" closeOnClickOverlay @confirm='confirmAddress' @cancel='addressShow=false'
			@close='addressShow = false' :address-data="addressData" :indexs="indexs" :areaId="form.region">
		</address-picker> -->
	</view>
</template>

<script>
	import {
		mapState,
	} from 'vuex'
	import {
		mergeData
	} from "@/common/handutil.js";
	import site from '@/custom/siteroot.js';
	import config from '@/custom/config.js';
	export default {
		components: {
		},
		data() {
			return {
				subColor: uni.getStorageSync('subject_color'),
				form: {
					storeSn: '',
					name: '',
					mobile: '',
					address: '',
					lat: '',
					lng: '',
					contact: '',
					region: [], 
					storeMobile: '',
					labelId: [],
					groupId: 1,
					operatingStatus: 1, 
					businessStatus: 1, 
					businessData: {
						week: [],
						times: []
					},
				},
				fileList1:[],
				fileList2:[],
				fileList3:[],
				rules: {
					name: [{
						required: true,
						message: '请输入门店名称',
						trigger: ['blur', 'change']
					}],
					address: [{
						required: true,
						message: '请输入详细地址',
						trigger: ['blur', 'change']
					}],
					lat: [{
						required: true,
						message: '请选择地图定位',
						trigger: ['blur', 'change']
					}],
					storeMobile: [{
						required: true,
						message: '请输入门店电话',
						trigger: ['blur', 'change']
					}],
					mobile: [{
						required: true,
						message: '请输入联系电话',
						trigger: ['blur', 'change']
					}],
					contact: [{
						required: true,
						message: '请输入联系人',
						trigger: ['blur', 'change']
					}],
				},
				labelList: [],
				groupList:[],
				areaList:[],
			}
		},
		onLoad() {
			this.fetchData()
		},
		computed: {
			...mapState({
				storeId: state => state.storeId,
			}),
		},
		methods: {
			async fetchData() {
				const {
					data
				} = await this.beg.request({
					url: `${this.api.storeinfo}/${this.storeId}`,
				})
				this.form = mergeData(this.form, data);
				if(this.form.businessData && this.form.businessData.week){
					this.form.businessData.week.sort()
				}
				if(data && data.surroundings && data.surroundings.length){
					this.fileList1 = []
					data.surroundings.forEach((v)=>{
						this.fileList1.push({
							url:v
						})
					})
				}
				if(data && data.businessLicense && data.businessLicense.length){
					this.fileList2 = []
					data.businessLicense.forEach((v)=>{
						this.fileList2.push({
							url:v
						})
					})
				}
				if(data && data.tradeLicense && data.tradeLicense.length){
					this.fileList3 = []
					data.tradeLicense.forEach((v)=>{
						this.fileList3.push({
							url:v
						})
					})
				}
				this.getLabel()
				this.getGroup()
				this.getArea()
			},
			async getLabel(){
				const {
					data: { list },
				  } = await this.beg.request({
					  url: this.api.storeLabelList,
					  data:{ pageNo: 1, pageSize: 9999 }
				  })
				  this.labelList = list
			},
			async getGroup(){
				const {
					data: { list },
				  } = await this.beg.request({
					  url: this.api.storeGroupList,
					  data:{ pageNo: 1, pageSize: 9999 }
				  })
				  this.groupList = list
				  this.groupList.forEach((v)=>{
					  v.text = v.name
					  v.value = v.id
				  })
			},
			async getArea(){
				let area = uni.getStorageSync('areaList')
				if(area){
					this.areaList = area
				}else{
					const {
						data,
					  } = await this.beg.request({
						  url: this.api.commonRegion,
					  })
					this.areaList = area
					uni.setStorageSync('areaList',data)
				}
			},
			 onchange(e) {
			    const v = e.detail.value
				if(v && v.length){
					this.form.region =[v[0].value,v[1].value,v[2].value]
				}
			},
			  onnodeclick(node) {
				console.log('node',node)
			},
			toMap() {
				uni.chooseLocation({
					success: (res) => {
						this.form.lat = res.latitude
						this.form.lng = res.longitude
					},
					fail: (e) =>{
						console.log(e)
					}
				})
			},
			toTime() {
				uni.navigateTo({
					url: `/pages/home/setting/time?form=${JSON.stringify(this.form)}`
				})
			},
			save() {
				if(this.fileList1.length){
					this.form.surroundings = []
					this.fileList1.forEach(v =>{
						this.form.surroundings.push(v.url)
					})
				}else{
					this.form.surroundings = []
				}
				if(this.fileList2.length){
					this.form.businessLicense = []
					this.fileList2.forEach(v =>{
						this.form.businessLicense.push(v.url)
					})
				}else{
					this.form.businessLicense = []
				}
				if(this.fileList3.length){
					this.form.tradeLicense = []
					this.fileList3.forEach(v =>{
						this.form.tradeLicense.push(v.url)
					})
				}else{
					this.form.tradeLicense = []
				}
				this.$refs.uForm.validate().then(async res => {
					const {
						msg
					} = await this.beg.request({
						url: `${this.api.storeinfo}/${this.storeId}`,
						method: 'put',
						data: this.form,
					})
					uni.$u.toast(msg)
					this.fetchData()
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			},
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			async afterRead(event) {
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: `${uni.getStorageSync('siteroot')}/channel/file/upload`,
						filePath: url,
						name: 'file',
						header: {
							contentType: config.contentType,
							appType: 'store',
							uniacid:  uni.getStorageSync('uniacid'),
							storeId: uni.getStorageSync('storeId'),
							Authorization: `Bearer ${uni.getStorageSync('token')}`,
						},
						success: (res) => {
							setTimeout(() => {
								let d = JSON.parse(res.data)
								resolve(d.data)
							}, 500)
						}
					});
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.home {
		padding-bottom: 240rpx;
		display: flex;
		flex-direction: column;

		/deep/.u-form-item__body__left__content__label {
			color: #000 !important;
		}

		/deep/.u-input__content__field-wrapper__field {
			color: #888 !important;
			text-align: right !important;
			font-size: 14px !important;
		}

		/deep/.u-radio-group--row {
			justify-content: flex-end !important;
		}

		/deep/.u-radio {
			padding-left: 28rpx;
		}
		
		/deep/.u-form-item__body__right__content__slot{
			display: flex;
			justify-content: flex-end;
		}

		.buts {
			width: 100%;
			position: fixed;
			left: 0;
			bottom: 0;
			z-index:999;
		}
	}
	/deep/.selected-item-active {
	    border-bottom: 2px solid #FDDA34;
	}
	/deep/.check {
	    border-color:#FDDA34;
	}
</style>